<template>
    <div class = 'layer-wrapper jimu-map-panel jimu-show' v-show = "isShow"> 
		<div class = "panel-close" @click = "close">
			<i class="iconfont icon-close"></i>
		</div>
		<div class="list-container">
			<div v-for="layer in config.layerList" :key="layer.uid" class="list-item">
				<div class="layer-name">{{layer.name}}</div>
				<div class="layer-switch">
					<el-switch
						v-model="layer.on"
						v-on:change="changeLayer(layer)"
						active-color="#4087f7"
						inactive-color="#e2e2e2">
					</el-switch>
				</div>
			</div>
		</div>
    </div>
</template>

<script>
import BaseWidget from '@/jimu/BaseWidget.js'
import mapUtils from '@/jimu/utils/mapUtils.js'
import { Switch } from 'element-ui'
export default {
	name: 'LayerWidget',
	mixins:[ BaseWidget ],
	data(){
		return {
			
		}
	},

	computed:{
		map: function(){
			return this.shareState.map
		},
	},

	destroyed(){
		this.removeLayers()
	},

	components:{
		"el-switch": Switch
	},

	methods:{
		changeLayer: function(layerObj){
			if(layerObj.on){
				mapUtils.setMapViz(layerObj.uid, layerObj.ak, this.map,(mapVizData)=>{
					layerObj.layerList = mapVizData.layerList
				})
			}else{
				layerObj.layerList.forEach(obj => {
					obj.layer.remove()
				});
			}
		},
		removeLayers: function(){
			for(let i = 0; i < this.config.layerList.length; i++){
				let layerObj = this.config.layerList[i]
				if(!layerObj.layerList){
					continue
				}
				layerObj.layerList.forEach(obj => {
					obj.layer.remove()
				});
			}
		}
	}
	
}
</script>

<style lang="scss">
.layer-wrapper{
	padding:15px 15px 10px 15px;
	width:230px;
	position: absolute;
	right:10px;
	top:10px;
	.list-container{
		margin-top:10px;
	}
	.list-item{
		padding: 5px 0 5px 0;
	}
	.layer-name, .layer-switch{
		display: inline-block;
	}
	.layer-switch{
		float:right;
	}
	.panel-close{
		height:20px;
		width:20px;
		text-align: center;
		line-height: 20px;
		position: absolute;
		right:10px;
		top:10px;
		cursor: pointer;
	}
}
</style>